<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>the photogrammar project</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>photogrammar test</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%; top:50px}</style>
<link rel="stylesheet" href="../css/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
<link  href="../css/styleMap.css" rel="stylesheet" type="text/css">
<link  href="../css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<link  href="../css/buttons.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../js/leaflet.js"></script>
<script type="text/javascript" src="../js/wax.leaf.min-6.2.3-touched.js"></script>
<script type="text/javascript" src="../dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="../dist/cartodb-popup-min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.google_menu.js"></script>
<link rel="stylesheet" type="text/css" href="../css/styleMain.css"/>

<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
</script>

<script type="text/javascript" src="../js/mapping.js"></script>

</head>
<body onload="initialize()">

<div class="menu">
    <ul style="float:left">
      <li style="padding-top:12px; padding-left:20px; font:40px/40px Didot; color: #FFFFFF;">
        the photogrammar project
        </li>
    </ul>
    <ul style="float:right">
      <li class="single-link">
        <a href="../index.php">Home</a>
        </li>
      <li class="current">
        <a href="../map">Map</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a href="../browse">Browse</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a href="../search">Search</a>
        </li>
      <li><!-- Do not add any class for links with dropdown -->
        <a href="../about">About</a>
        <!-- Drop Down menu Items -->
        <ul>
            <li><a href="../blog">Blog</a></li>
            <li>
            <div class="mid-line">
            </div>
            </li>
            <li><a href="#">People</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">Links</a></li>
            <li>
            <div class="mid-line">
            </div>
            </li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Contact</a></li>
            <li>
            <div class="mid-line">
            </div>
            </li>
        </ul>
        </li>
    </ul>
</div>
<div id="map" style="top:70px; left:0px"></div>

<div id="panelOut" class="panel" style="margin:0px; padding:0px;">    
    <div id="panelTop" style="top:70px; border-bottom-style:solid; border-width:1px; margin:0px; padding:0px; border-color:#C4C4C4; height:62px">
        <div id="toggleButtonClose" style="height:33px; width:33px; z-index:2; border-style:solid;
                    border-width:1px; border-color:black; top:88px; padding:0px; z-index:2"> 
            <img src="../images/leftarrow.png" alt="right_arrow"/>
        </div>

	    <div class="buttons" style="padding-left:40px; top:-40px; width:300px">
		    <a href="#" class="button">Seach Map</a><a href="#" class="button">See Photos</a><a href="#" class="button">Clear</a>
	    </div>
    </div>

    <div id="panelMed" style="width:400px; top:70px; margin:0px; padding:0px; height:300px">
        <formg name="myWebForm" action="" method="post">
           <input type="checkbox" /> Checkbox 1<br />
           <input type="text" /> Text Field 1<br />
        </form>
    </div>

    <div id="panelBottom" style="width:400px; position: absolute; bottom: 10px; border-top-style:solid; border-width:1px;
                                     margin:0px; padding:0px; border-color:#C4C4C4; height:300px">
            Lower div for 'fixed' check boxes and things.
    </div>

</div>

<div id="toggleButtonOpen" class="panel" style="height:30px; width:30px; z-index:2; border-style:solid;
border-width:3px; border-color:black; top:85px; cursor: pointer;">    
<img src="../images/rightarrow.png" alt="right_arrow"/>
</div>

<script>
var slidePanelOpen; // flag set if panel is open or closed

slidePanelOpen = true;

$("#toggleButtonClose").click(function() {
    if (slidePanelOpen) {
        // hide panel
        $("#panelOut").animate({
            "marginLeft": "-=450px"
        }, 500);
        slidePanelOpen = false;
        toggleButton.attr('value', 'Open');
    }
    else {
        $("#panelOut").animate({
            "marginLeft": "+=450px"
        }, 500);
        slidePanelOpen = true;
        toggleButton.attr('value', 'Close');
    };
});
$("#toggleButtonOpen").click(function() {
    if (slidePanelOpen) {
        // hide panel
        $("#panelOut").animate({
            "marginLeft": "-=450px"
        }, 500);
        slidePanelOpen = false;
        toggleButton.attr('value', 'Open');
    }
    else {
        $("#panelOut").animate({
            "marginLeft": "+=450px"
        }, 500);
        slidePanelOpen = true;
        toggleButton.attr('value', 'Close');
    };
});

</script>

</body>
</html>
